<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>问遗知途</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!--引入Vue-->
        <script type="text/javascript" src="../js/vue.js"></script>
    <style>
        .header{
            display: flex;
            height: 100vh;
            background-attachment: scroll;
            background-image: url("WechatIMG174.png");
            background-position: left top;
            background-size: cover;
        }
        .content-main{
            display: flex;
            background-color: rgba(168,140,75,0.6);
            width: 100%;
            height: 10%;
            justify-content:space-between;
        }
        .logo {
            display: flex;
            cursor: pointer;
            margin-top: 40px;
            >img {
                width: 20px;
                height: 20px;
                vertical-align: middle;
                margin-right: 70px;
            }

            >span {
                font-weight: bold;
                vertical-align: middle;
            }
        }
        .subfield{
            margin: 20px;
            margin-top: 15px;
            margin-left: 25px;
        }
        .user {
            display: inline-block;
            margin-top: 25px;
            margin-right: 30px;

        }
    </style>
</head>

<body>
    <!-- import Vue before Element -->
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <div id="app">
        <div class="header">
            <div class="content-main">
                <ul style="display: inline-block;">
                    <li class="subfield" style="display: inline-block;"  v-for="item in routerList" :key="item.id">
                        <el-link style="font-size: larger; color:rgb(68, 71, 35);" href="item.path" target="_blank" type="info">
                            {{item.name}}
                        </el-link>
                    </li>
                </ul>
                <div class="logo" style="display: inline-block;">
                    <img src="../assets/logo.png" />
                    <span>问遗知途</span>
                </div>
                <div class="user" style="display: inline-block;">
                    <el-button type="warning" true>注册</el-button>
                    <el-button type="warning" true>登陆</el-button>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        new Vue({
            el: '#app',
            data: function () {
                return { 
                    routerList: [
                        {
                            path: "/",
                            name: "首页",
                        },
                        {
                            path: "/QA",
                            name: "智能问答",
                        },
                        {
                            path: "/feedback",
                            name: "反馈界面",
                        },
                        {
                            path: "/overview",
                            name: "非遗概览",
                        },
                        {
                            path: "/expansion",
                            name: "拓展",
                        }
                    ]
                 }
            }
        })
    </script>
</body>

</html>